
<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="50%"
     :before-close="handleClose"
    >
    <!-- 表单 -->
    <el-form 
        :model="ruleForm" 
        :rules="rules" 
        ref="ruleForm" 
        label-width="100px" 
        class="demo-ruleForm">
         <el-form-item label="用户名" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
             <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
  <el-form-item label="消费金额" prop="money">
            <el-input v-model.number="ruleForm.money"></el-input>
        </el-form-item>
         <el-form-item label="订单数量" prop="count">
            <el-input v-model.number="ruleForm.count"></el-input>
        </el-form-item>
    <el-form-item label="会员等级" prop="type">
              <el-select class="select1" v-model.number="ruleForm.type" placeholder="请选择会员等级">
                <el-option label="请选择" value=""></el-option>
                <el-option label="普通用户" :value="1"></el-option>
                <el-option label="VIP" :value="2"></el-option>
                <el-option label="钻石VIP" :value="3"></el-option>
              </el-select>
        </el-form-item>  
    </el-form>    

    <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitform('ruleForm')">提 交</el-button>
    </span>
 </el-dialog>
</template>

<script>
  export default {
    props:['row','btnType'],
    data() {
      return {
        dialogVisible: true, //控制弹框的显示和隐藏的
        ruleForm:{
           id:'',
           name:'',
           address:'',
           type:'',// 0充值 1优惠券 2购买一定盈
           count:'',
           money:''
        },
        rules: {
          name: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
          ],
          address:[
             { required: true, message: '请选择籍贯', trigger: 'blur' },
          ],
           type:[
              { required: true, message: '请输入会员等级', trigger: 'change' },
        
          ],
           money:[
             { required: true, message: '请输入消费金额', trigger: 'blur' },
          ],
           count:[
             { required: true, message: '请输入订单数量', trigger: 'blur' },
          ],
        }  
      };
    },
    mounted(){
         this.ruleForm = {...this.row} //赋值   
    },
    methods: {
    submitform(ruleForm){
       
          if(this.btnType==0){
       // 发送添加请求
      this.$emit('addonefun',this.ruleForm)
      this.$emit('closealert')
      }else{
        this.$emit('editfun',this.ruleForm)
      }
           
        
    },

    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
            this.cancel()
          })
          .catch(_ => {});
      },

    //取消
    cancel(){
      this.$emit('cancelalert')
    }
    }
  };
</script>

<style lang="less" scoped>
  .select1{
    width: 100%;
  }
</style>>

